<!-- https://codepen.io/ko-yelie/pen/LqXWWx -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">

  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>CodePen - Shooting Star</title>
  <style>
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      background-color: #000;
    }

    #canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    body.o-start #canvas {
      cursor: none;
    }

    #message {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      color: rgba(255, 255, 255, 0.7);
      font-family: Georgia, serif;
      font-size: 0.9rem;
      text-align: center;
      letter-spacing: 0.1em;
      pointer-events: none;
      opacity: 0;
      transition: opacity 500ms;
    }

    body.o-start #message {
      opacity: 1;
    }
  </style>

  <script>
    window.console = window.console || function (t) { };
  </script>



  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>


  <style type="text/css">
    .dg ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      clear: both
    }

    .dg.ac {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      z-index: 0
    }

    .dg:not(.ac) .main {
      overflow: hidden
    }

    .dg.main {
      -webkit-transition: opacity .1s linear;
      -o-transition: opacity .1s linear;
      -moz-transition: opacity .1s linear;
      transition: opacity .1s linear
    }

    .dg.main.taller-than-window {
      overflow-y: auto
    }

    .dg.main.taller-than-window .close-button {
      opacity: 1;
      margin-top: -1px;
      border-top: 1px solid #2c2c2c
    }

    .dg.main ul.closed .close-button {
      opacity: 1 !important
    }

    .dg.main:hover .close-button,
    .dg.main .close-button.drag {
      opacity: 1
    }

    .dg.main .close-button {
      -webkit-transition: opacity .1s linear;
      -o-transition: opacity .1s linear;
      -moz-transition: opacity .1s linear;
      transition: opacity .1s linear;
      border: 0;
      line-height: 19px;
      height: 20px;
      cursor: pointer;
      text-align: center;
      background-color: #000
    }

    .dg.main .close-button.close-top {
      position: relative
    }

    .dg.main .close-button.close-bottom {
      position: absolute
    }

    .dg.main .close-button:hover {
      background-color: #111
    }

    .dg.a {
      float: right;
      margin-right: 15px;
      overflow-y: visible
    }

    .dg.a.has-save>ul.close-top {
      margin-top: 0
    }

    .dg.a.has-save>ul.close-bottom {
      margin-top: 27px
    }

    .dg.a.has-save>ul.closed {
      margin-top: 0
    }

    .dg.a .save-row {
      top: 0;
      z-index: 1002
    }

    .dg.a .save-row.close-top {
      position: relative
    }

    .dg.a .save-row.close-bottom {
      position: fixed
    }

    .dg li {
      -webkit-transition: height .1s ease-out;
      -o-transition: height .1s ease-out;
      -moz-transition: height .1s ease-out;
      transition: height .1s ease-out;
      -webkit-transition: overflow .1s linear;
      -o-transition: overflow .1s linear;
      -moz-transition: overflow .1s linear;
      transition: overflow .1s linear
    }

    .dg li:not(.folder) {
      cursor: auto;
      height: 27px;
      line-height: 27px;
      padding: 0 4px 0 5px
    }

    .dg li.folder {
      padding: 0;
      border-left: 4px solid rgba(0, 0, 0, 0)
    }

    .dg li.title {
      cursor: pointer;
      margin-left: -4px
    }

    .dg .closed li:not(.title),
    .dg .closed ul li,
    .dg .closed ul li>* {
      height: 0;
      overflow: hidden;
      border: 0
    }

    .dg .cr {
      clear: both;
      padding-left: 3px;
      height: 27px;
      overflow: hidden
    }

    .dg .property-name {
      cursor: default;
      float: left;
      clear: left;
      width: 40%;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .dg .c {
      float: left;
      width: 60%;
      position: relative
    }

    .dg .c input[type=text] {
      border: 0;
      margin-top: 4px;
      padding: 3px;
      width: 100%;
      float: right
    }

    .dg .has-slider input[type=text] {
      width: 30%;
      margin-left: 0
    }

    .dg .slider {
      float: left;
      width: 66%;
      margin-left: -5px;
      margin-right: 0;
      height: 19px;
      margin-top: 4px
    }

    .dg .slider-fg {
      height: 100%
    }

    .dg .c input[type=checkbox] {
      margin-top: 7px
    }

    .dg .c select {
      margin-top: 5px
    }

    .dg .cr.function,
    .dg .cr.function .property-name,
    .dg .cr.function *,
    .dg .cr.boolean,
    .dg .cr.boolean * {
      cursor: pointer
    }

    .dg .cr.color {
      overflow: visible
    }

    .dg .selector {
      display: none;
      position: absolute;
      margin-left: -9px;
      margin-top: 23px;
      z-index: 10
    }

    .dg .c:hover .selector,
    .dg .selector.drag {
      display: block
    }

    .dg li.save-row {
      padding: 0
    }

    .dg li.save-row .button {
      display: inline-block;
      padding: 0px 6px
    }

    .dg.dialogue {
      background-color: #222;
      width: 460px;
      padding: 15px;
      font-size: 13px;
      line-height: 15px
    }

    #dg-new-constructor {
      padding: 10px;
      color: #222;
      font-family: Monaco, monospace;
      font-size: 10px;
      border: 0;
      resize: none;
      box-shadow: inset 1px 1px 1px #888;
      word-wrap: break-word;
      margin: 12px 0;
      display: block;
      width: 440px;
      overflow-y: scroll;
      height: 100px;
      position: relative
    }

    #dg-local-explain {
      display: none;
      font-size: 11px;
      line-height: 17px;
      border-radius: 3px;
      background-color: #333;
      padding: 8px;
      margin-top: 10px
    }

    #dg-local-explain code {
      font-size: 10px
    }

    #dat-gui-save-locally {
      display: none
    }

    .dg {
      color: #eee;
      font: 11px 'Lucida Grande', sans-serif;
      text-shadow: 0 -1px 0 #111
    }

    .dg.main::-webkit-scrollbar {
      width: 5px;
      background: #1a1a1a
    }

    .dg.main::-webkit-scrollbar-corner {
      height: 0;
      display: none
    }

    .dg.main::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #676767
    }

    .dg li:not(.folder) {
      background: #1a1a1a;
      border-bottom: 1px solid #2c2c2c
    }

    .dg li.save-row {
      line-height: 25px;
      background: #dad5cb;
      border: 0
    }

    .dg li.save-row select {
      margin-left: 5px;
      width: 108px
    }

    .dg li.save-row .button {
      margin-left: 5px;
      margin-top: 1px;
      border-radius: 2px;
      font-size: 9px;
      line-height: 7px;
      padding: 4px 4px 5px 4px;
      background: #c5bdad;
      color: #fff;
      text-shadow: 0 1px 0 #b0a58f;
      box-shadow: 0 -1px 0 #b0a58f;
      cursor: pointer
    }

    .dg li.save-row .button.gears {
      background: #c5bdad url() 2px 1px no-repeat;
      height: 7px;
      width: 8px
    }

    .dg li.save-row .button:hover {
      background-color: #bab19e;
      box-shadow: 0 -1px 0 #b0a58f
    }

    .dg li.folder {
      border-bottom: 0
    }

    .dg li.title {
      padding-left: 16px;
      background: #000 url() 6px 10px no-repeat;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    }

    .dg .closed li.title {
      background-image: url()
    }

    .dg .cr.boolean {
      border-left: 3px solid #806787
    }

    .dg .cr.color {
      border-left: 3px solid
    }

    .dg .cr.function {
      border-left: 3px solid #e61d5f
    }

    .dg .cr.number {
      border-left: 3px solid #2FA1D6
    }

    .dg .cr.number input[type=text] {
      color: #2FA1D6
    }

    .dg .cr.string {
      border-left: 3px solid #1ed36f
    }

    .dg .cr.string input[type=text] {
      color: #1ed36f
    }

    .dg .cr.function:hover,
    .dg .cr.boolean:hover {
      background: #111
    }

    .dg .c input[type=text] {
      background: #303030;
      outline: none
    }

    .dg .c input[type=text]:hover {
      background: #3c3c3c
    }

    .dg .c input[type=text]:focus {
      background: #494949;
      color: #fff
    }

    .dg .c .slider {
      background: #303030;
      cursor: ew-resize
    }

    .dg .c .slider-fg {
      background: #2FA1D6;
      max-width: 100%
    }

    .dg .c .slider:hover {
      background: #3c3c3c
    }

    .dg .c .slider:hover .slider-fg {
      background: #44abda
    }
  </style>
  <style type="text/css">
    .dg ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      clear: both
    }

    .dg.ac {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      z-index: 0
    }

    .dg:not(.ac) .main {
      overflow: hidden
    }

    .dg.main {
      -webkit-transition: opacity .1s linear;
      -o-transition: opacity .1s linear;
      -moz-transition: opacity .1s linear;
      transition: opacity .1s linear
    }

    .dg.main.taller-than-window {
      overflow-y: auto
    }

    .dg.main.taller-than-window .close-button {
      opacity: 1;
      margin-top: -1px;
      border-top: 1px solid #2c2c2c
    }

    .dg.main ul.closed .close-button {
      opacity: 1 !important
    }

    .dg.main:hover .close-button,
    .dg.main .close-button.drag {
      opacity: 1
    }

    .dg.main .close-button {
      -webkit-transition: opacity .1s linear;
      -o-transition: opacity .1s linear;
      -moz-transition: opacity .1s linear;
      transition: opacity .1s linear;
      border: 0;
      line-height: 19px;
      height: 20px;
      cursor: pointer;
      text-align: center;
      background-color: #000
    }

    .dg.main .close-button.close-top {
      position: relative
    }

    .dg.main .close-button.close-bottom {
      position: absolute
    }

    .dg.main .close-button:hover {
      background-color: #111
    }

    .dg.a {
      float: right;
      margin-right: 15px;
      overflow-y: visible
    }

    .dg.a.has-save>ul.close-top {
      margin-top: 0
    }

    .dg.a.has-save>ul.close-bottom {
      margin-top: 27px
    }

    .dg.a.has-save>ul.closed {
      margin-top: 0
    }

    .dg.a .save-row {
      top: 0;
      z-index: 1002
    }

    .dg.a .save-row.close-top {
      position: relative
    }

    .dg.a .save-row.close-bottom {
      position: fixed
    }

    .dg li {
      -webkit-transition: height .1s ease-out;
      -o-transition: height .1s ease-out;
      -moz-transition: height .1s ease-out;
      transition: height .1s ease-out;
      -webkit-transition: overflow .1s linear;
      -o-transition: overflow .1s linear;
      -moz-transition: overflow .1s linear;
      transition: overflow .1s linear
    }

    .dg li:not(.folder) {
      cursor: auto;
      height: 27px;
      line-height: 27px;
      padding: 0 4px 0 5px
    }

    .dg li.folder {
      padding: 0;
      border-left: 4px solid rgba(0, 0, 0, 0)
    }

    .dg li.title {
      cursor: pointer;
      margin-left: -4px
    }

    .dg .closed li:not(.title),
    .dg .closed ul li,
    .dg .closed ul li>* {
      height: 0;
      overflow: hidden;
      border: 0
    }

    .dg .cr {
      clear: both;
      padding-left: 3px;
      height: 27px;
      overflow: hidden
    }

    .dg .property-name {
      cursor: default;
      float: left;
      clear: left;
      width: 40%;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .dg .c {
      float: left;
      width: 60%;
      position: relative
    }

    .dg .c input[type=text] {
      border: 0;
      margin-top: 4px;
      padding: 3px;
      width: 100%;
      float: right
    }

    .dg .has-slider input[type=text] {
      width: 30%;
      margin-left: 0
    }

    .dg .slider {
      float: left;
      width: 66%;
      margin-left: -5px;
      margin-right: 0;
      height: 19px;
      margin-top: 4px
    }

    .dg .slider-fg {
      height: 100%
    }

    .dg .c input[type=checkbox] {
      margin-top: 7px
    }

    .dg .c select {
      margin-top: 5px
    }

    .dg .cr.function,
    .dg .cr.function .property-name,
    .dg .cr.function *,
    .dg .cr.boolean,
    .dg .cr.boolean * {
      cursor: pointer
    }

    .dg .cr.color {
      overflow: visible
    }

    .dg .selector {
      display: none;
      position: absolute;
      margin-left: -9px;
      margin-top: 23px;
      z-index: 10
    }

    .dg .c:hover .selector,
    .dg .selector.drag {
      display: block
    }

    .dg li.save-row {
      padding: 0
    }

    .dg li.save-row .button {
      display: inline-block;
      padding: 0px 6px
    }

    .dg.dialogue {
      background-color: #222;
      width: 460px;
      padding: 15px;
      font-size: 13px;
      line-height: 15px
    }

    #dg-new-constructor {
      padding: 10px;
      color: #222;
      font-family: Monaco, monospace;
      font-size: 10px;
      border: 0;
      resize: none;
      box-shadow: inset 1px 1px 1px #888;
      word-wrap: break-word;
      margin: 12px 0;
      display: block;
      width: 440px;
      overflow-y: scroll;
      height: 100px;
      position: relative
    }

    #dg-local-explain {
      display: none;
      font-size: 11px;
      line-height: 17px;
      border-radius: 3px;
      background-color: #333;
      padding: 8px;
      margin-top: 10px
    }

    #dg-local-explain code {
      font-size: 10px
    }

    #dat-gui-save-locally {
      display: none
    }

    .dg {
      color: #eee;
      font: 11px 'Lucida Grande', sans-serif;
      text-shadow: 0 -1px 0 #111
    }

    .dg.main::-webkit-scrollbar {
      width: 5px;
      background: #1a1a1a
    }

    .dg.main::-webkit-scrollbar-corner {
      height: 0;
      display: none
    }

    .dg.main::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #676767
    }

    .dg li:not(.folder) {
      background: #1a1a1a;
      border-bottom: 1px solid #2c2c2c
    }

    .dg li.save-row {
      line-height: 25px;
      background: #dad5cb;
      border: 0
    }

    .dg li.save-row select {
      margin-left: 5px;
      width: 108px
    }

    .dg li.save-row .button {
      margin-left: 5px;
      margin-top: 1px;
      border-radius: 2px;
      font-size: 9px;
      line-height: 7px;
      padding: 4px 4px 5px 4px;
      background: #c5bdad;
      color: #fff;
      text-shadow: 0 1px 0 #b0a58f;
      box-shadow: 0 -1px 0 #b0a58f;
      cursor: pointer
    }

    .dg li.save-row .button.gears {
      background: #c5bdad url() 2px 1px no-repeat;
      height: 7px;
      width: 8px
    }

    .dg li.save-row .button:hover {
      background-color: #bab19e;
      box-shadow: 0 -1px 0 #b0a58f
    }

    .dg li.folder {
      border-bottom: 0
    }

    .dg li.title {
      padding-left: 16px;
      background: #000 url() 6px 10px no-repeat;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    }

    .dg .closed li.title {
      background-image: url()
    }

    .dg .cr.boolean {
      border-left: 3px solid #806787
    }

    .dg .cr.color {
      border-left: 3px solid
    }

    .dg .cr.function {
      border-left: 3px solid #e61d5f
    }

    .dg .cr.number {
      border-left: 3px solid #2FA1D6
    }

    .dg .cr.number input[type=text] {
      color: #2FA1D6
    }

    .dg .cr.string {
      border-left: 3px solid #1ed36f
    }

    .dg .cr.string input[type=text] {
      color: #1ed36f
    }

    .dg .cr.function:hover,
    .dg .cr.boolean:hover {
      background: #111
    }

    .dg .c input[type=text] {
      background: #303030;
      outline: none
    }

    .dg .c input[type=text]:hover {
      background: #3c3c3c
    }

    .dg .c input[type=text]:focus {
      background: #494949;
      color: #fff
    }

    .dg .c .slider {
      background: #303030;
      cursor: ew-resize
    }

    .dg .c .slider-fg {
      background: #2FA1D6;
      max-width: 100%
    }

    .dg .c .slider:hover {
      background: #3c3c3c
    }

    .dg .c .slider:hover .slider-fg {
      background: #44abda
    }
  </style><input type="hidden" id="_w_simile" data-inspect-config="3">
  <script type="text/javascript"
    src="chrome-extension://odphnbhiddhdpoccbialllejaajemdio/scripts/inspector.js"></script>
</head>

<body translate="no" class="o-start">
  <canvas id="canvas" width="1484" height="521" style="width: 1484px; height: 521px;"></canvas>
  <p id="message">Move your mouse</p>
  <script
    src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
  <script id="rendered-js" type="module">
    parcelRequire = function (init) {
      // Save the require from previous bundle to this closure if any
      var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
      var nodeRequire = typeof require === 'function' && require;
      var modules = {};

      function localRequire(name, jumped) {
        if (name in modules) {
          return modules[name];
        }

        // if we cannot find the module within our internal map or
        // cache jump to the current global require ie. the last bundle
        // that was added to the page.
        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
        if (!jumped && currentRequire) {
          return currentRequire(name, true);
        }

        // If there are other bundles on this page the require from the
        // previous one is saved to 'previousRequire'. Repeat this as
        // many times as there are bundles until the module is found or
        // we exhaust the require chain.
        if (previousRequire) {
          return previousRequire(name, true);
        }

        // Try the node require function if it exists.
        if (nodeRequire && typeof name === 'string') {
          return nodeRequire(name);
        }

        var err = new Error('Cannot find module \'' + name + '\'');
        err.code = 'MODULE_NOT_FOUND';
        throw err;
      }

      localRequire.register = function register(id, exports) {
        modules[id] = exports;
      };

      modules = init(localRequire);
      localRequire.modules = modules;
      return localRequire;
    }(function (require) {
      function $parcel$interopDefault(a) {
        return a && a.__esModule ? {
          d: a.default
        } :
          {
            d: a
          };

      }

      function $pTw7$var$_toConsumableArray(arr) {
        return $pTw7$var$_arrayWithoutHoles(arr) || $pTw7$var$_iterableToArray(arr) || $pTw7$var$_nonIterableSpread();
      }

      function $pTw7$var$_nonIterableSpread() {
        throw new TypeError("Invalid attempt to spread non-iterable instance");
      }

      function $pTw7$var$_iterableToArray(iter) {
        if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
      }

      function $pTw7$var$_arrayWithoutHoles(arr) {
        if (Array.isArray(arr)) {
          for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
            arr2[i] = arr[i];
          }

          return arr2;
        }
      }

      function $pTw7$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $pTw7$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $pTw7$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $pTw7$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $pTw7$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      } // import * as THREE from 'three'
      // import TrackballControls from 'three-trackballcontrols'
      // import './three/postprocessing'
      // THREE.TrackballControls = TrackballControls

      /*!
       * Three.js Wrapper
       * forked from https://github.com/zadvorsky/three.bas/blob/86931253240abadf68b7c62edb934b994693ed4a/examples/_js/root.js
       */


      var $pTw7$export$default =
        /*#__PURE__*/
        function () {
          function THREERoot(params) {
            var _this$camera$position,
              _this = this;

            $pTw7$var$_classCallCheck(this, THREERoot); // defaults

            var _params$container = params.container,
              container = _params$container === void 0 ? document.body : _params$container,
              _params$fov = params.fov,
              fov = _params$fov === void 0 ? 45 : _params$fov,
              zNear = params.zNear,
              zFar = params.zFar,
              _params$cameraPositio = params.cameraPosition,
              cameraPosition = _params$cameraPositio === void 0 ? [0, 0, 30] : _params$cameraPositio,
              _params$createCameraC = params.createCameraControls,
              createCameraControls = _params$createCameraC === void 0 ? false : _params$createCameraC,
              _params$isAutoStart = params.isAutoStart,
              isAutoStart = _params$isAutoStart === void 0 ? true : _params$isAutoStart,
              _params$pixelRatio = params.pixelRatio,
              pixelRatio = _params$pixelRatio === void 0 ? window.devicePixelRatio : _params$pixelRatio,
              _params$antialias = params.antialias,
              antialias = _params$antialias === void 0 ? window.devicePixelRatio === 1 : _params$antialias,
              _params$alpha = params.alpha,
              alpha = _params$alpha === void 0 ? false : _params$alpha,
              _params$clearColor = params.clearColor,
              clearColor = _params$clearColor === void 0 ? 0x000000 : _params$clearColor,
              aspect = params.aspect,
              _params$canvas = params.canvas,
              canvas = _params$canvas === void 0 ? document.createElement('canvas') : _params$canvas,
              _params$speed = params.speed,
              speed = _params$speed === void 0 ? 60 / 1000 : _params$speed,
              interval = params.interval,
              _params$firstTime = params.firstTime,
              firstTime = _params$firstTime === void 0 ? 0 : _params$firstTime,
              _params$isDev = params.isDev,
              isDev = _params$isDev === void 0 ? false : _params$isDev;
            this.speed = speed;
            this.interval = interval;
            this.time = this.firstTime = firstTime;
            this.stopTime = 0; // maps and arrays

            this.updateCallbacks = [];
            this.resizeCallbacks = [];
            this.objects = {}; // renderer

            this.renderer = new THREE.WebGLRenderer({
              antialias: antialias,
              alpha: alpha,
              canvas: canvas
            });

            this.renderer.setPixelRatio(pixelRatio);
            this.renderer.setClearColor(clearColor, alpha ? 0 : 1);
            this.canvas = this.renderer.domElement; // container

            this.container = typeof container === 'string' ? document.querySelector(container) : container;
            !params.canvas && this.container.appendChild(this.canvas);
            this.aspect = aspect || this.container.clientWidth / this.container.clientHeight;
            this.setSize(); // camera

            this.camera = new THREE.PerspectiveCamera(fov, this.width / this.height, zNear, zFar);

            (_this$camera$position = this.camera.position).set.apply(_this$camera$position, $pTw7$var$_toConsumableArray(cameraPosition));

            this.camera.updateProjectionMatrix(); // scene

            this.scene = new THREE.Scene(); // resize handling

            this.resize();
            window.addEventListener('resize', function () {
              _this.resize();
            }); // tick / update / render

            isAutoStart && this.start(); // optional camera controls

            createCameraControls && this.createOrbitControls(); // pointer

            this.raycaster = new THREE.Raycaster();
            this.pointer = new THREE.Vector2(); // developer mode

            if (isDev) {
              document.addEventListener('keydown', function (_ref) {
                var key = _ref.key;

                if (key === 'Escape') {
                  _this.toggle();
                }
              });
            }
          }

          $pTw7$var$_createClass(THREERoot, [{
            key: "setSize",
            value: function setSize() {
              if (this.aspect) {
                if (this.container.clientWidth / this.container.clientHeight > this.aspect) {
                  this.width = this.container.clientHeight * this.aspect;
                  this.height = this.container.clientHeight;
                } else {
                  this.width = this.container.clientWidth;
                  this.height = this.container.clientWidth / this.aspect;
                }
              } else {
                this.width = this.container.clientWidth;
                this.height = this.container.clientHeight;
              }
            }
          },
          {
            key: "createOrbitControls",
            value: function createOrbitControls() {
              var _this2 = this;

              if (!THREE.TrackballControls) {
                console.error('TrackballControls.js file is not loaded.');
                return;
              }

              this.controls = new THREE.TrackballControls(this.camera, this.canvas);
              this.addUpdateCallback(function () {
                _this2.controls.update();
              });
            }
          },
          {
            key: "start",
            value: function start() {
              var _this3 = this;

              var startTime = this.stopTime || this.firstTime;
              requestAnimationFrame(function (timestamp) {
                _this3.startTime = timestamp - startTime;
                _this3.time = timestamp - _this3.startTime;
              });
              this.tick();
            }
          },
          {
            key: "tick",
            value: function tick() {
              var _this4 = this;

              this.update();
              this.render();
              this.animationFrameId = requestAnimationFrame(function (timestamp) {
                _this4.time = timestamp - _this4.startTime;

                _this4.tick();
              });
            }
          },
          {
            key: "update",
            value: function update() {
              var time = this.time * this.speed;
              time = this.interval ? time % this.interval : time;
              this.updateCallbacks.forEach(function (fn) {
                fn(time);
              });
            }
          },
          {
            key: "render",
            value: function render() {
              this.renderer.render(this.scene, this.camera);
            }
          },
          {
            key: "draw",
            value: function draw() {
              this.update();
              this.render();
            }
          },
          {
            key: "stop",
            value: function stop() {
              cancelAnimationFrame(this.animationFrameId);
              this.animationFrameId = null;
              this.stopTime = this.time;
            }
          },
          {
            key: "reset",
            value: function reset() {
              this.stop();
              this.stopTime = 0;
            }
          },
          {
            key: "toggle",
            value: function toggle() {
              this.animationFrameId ? this.stop() : this.start();
            }
          },
          {
            key: "addUpdateCallback",
            value: function addUpdateCallback(callback) {
              this.updateCallbacks.push(callback);
            }
          },
          {
            key: "addResizeCallback",
            value: function addResizeCallback(callback) {
              this.resizeCallbacks.push(callback);
            }
          },
          {
            key: "add",
            value: function add(object, key) {
              key && (this.objects[key] = object);
              this.scene.add(object);
            }
          },
          {
            key: "addTo",
            value: function addTo(object, parentKey, key) {
              key && (this.objects[key] = object);
              this.get(parentKey).add(object);
            }
          },
          {
            key: "get",
            value: function get(key) {
              return this.objects[key];
            }
          },
          {
            key: "remove",
            value: function remove(o) {
              var object;

              if (typeof o === 'string') {
                object = this.objects[o];
              } else {
                object = o;
              }

              if (object) {
                object.parent.remove(object);
                delete this.objects[o];
              }
            }
          },
          {
            key: "resize",
            value: function resize() {
              this.container.style.width = '';
              this.container.style.height = '';

              if (this.aspect) {
                this.aspect = this.container.clientWidth / this.container.clientHeight;
              }

              this.setSize();
              this.camera.aspect = this.width / this.height;
              this.camera.updateProjectionMatrix();
              this.renderer.setSize(this.width, this.height);
              this.resizeCallbacks.forEach(function (callback) {
                callback();
              });
            }
          },
          {
            key: "initPostProcessing",
            value: function initPostProcessing(passes) {
              var _this5 = this;

              var size = this.renderer.getSize();
              var pixelRatio = this.renderer.getPixelRatio();
              size.width *= pixelRatio;
              size.height *= pixelRatio;
              var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBAFormat,
                stencilBuffer: false
              }));

              var renderPass = new THREE.RenderPass(this.scene, this.camera);
              composer.addPass(renderPass);

              for (var i = 0; i < passes.length; i++) {
                var pass = passes[i];
                pass.renderToScreen = i === passes.length - 1;
                composer.addPass(pass);
              }

              this.renderer.autoClear = false;

              this.render = function () {
                _this5.renderer.clear();

                composer.render();
              };

              this.addResizeCallback(function () {
                composer.setSize(_this5.canvas.clientWidth * pixelRatio, _this5.canvas.clientHeight * pixelRatio);
              });
            }
          },
          {
            key: "checkPointer",
            value: function checkPointer(_ref2, meshs, handler, nohandler) {
              var x = _ref2.x,
                y = _ref2.y;
              this.pointer.x = x / this.canvas.clientWidth * 2 - 1;
              this.pointer.y = -(y / this.canvas.clientHeight) * 2 + 1;
              this.raycaster.setFromCamera(this.pointer, this.camera);
              var intersects = this.raycaster.intersectObjects(meshs);

              if (intersects.length > 0) {
                handler(intersects[0].object);
                return true;
              } else {
                nohandler && nohandler();
                return false;
              }
            }
          }]);

          return THREERoot;
        }();

      function $Moin$export$noop() { }

      function $IDtB$var$_toConsumableArray(arr) {
        return $IDtB$var$_arrayWithoutHoles(arr) || $IDtB$var$_iterableToArray(arr) || $IDtB$var$_nonIterableSpread();
      }

      function $IDtB$var$_nonIterableSpread() {
        throw new TypeError("Invalid attempt to spread non-iterable instance");
      }

      function $IDtB$var$_iterableToArray(iter) {
        if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
      }

      function $IDtB$var$_arrayWithoutHoles(arr) {
        if (Array.isArray(arr)) {
          for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
            arr2[i] = arr[i];
          }

          return arr2;
        }
      }

      function $IDtB$var$_typeof(obj) {
        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
          $IDtB$var$_typeof = function _typeof(obj) {
            return typeof obj;
          };
        } else {
          $IDtB$var$_typeof = function _typeof(obj) {
            return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
          };
        }

        return $IDtB$var$_typeof(obj);
      }

      function $IDtB$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $IDtB$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $IDtB$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $IDtB$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $IDtB$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      }

      var $IDtB$export$default =
        /*#__PURE__*/
        function () {
          function Controller(options) {
            $IDtB$var$_classCallCheck(this, Controller);
            var closed = options.closed;
            this.gui = new dat.GUI(options);
            this.gui.closed = closed;
          }
          /**
           * addData
           *
           * @param {Object} data
           * @param {Object} [options={}]
           * @param {function} [options.callback=noop]
           * @param {function} [options.folder=gui]
           * @memberof Controller
           */


          $IDtB$var$_createClass(Controller, [{
            key: "addData",
            value: function addData(data) {
              var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
              var _options$folder = options.folder,
                folder = _options$folder === void 0 ? this.gui : _options$folder,
                _options$callback = options.callback,
                callback = _options$callback === void 0 ? $Moin$export$noop : _options$callback,
                isUniform = options.isUniform;
              var dataKeys = Object.keys(data);
              var datData = {};
              dataKeys.forEach(function (key) {
                datData[key] = data[key].value;
              });
              dataKeys.forEach(function (key) {
                var _data$key = data[key],
                  isColor = _data$key.isColor,
                  value = _data$key.value,
                  range = _data$key.range,
                  onChange = _data$key.onChange,
                  listen = _data$key.listen;
                var type;

                if (isUniform) {
                  switch ($IDtB$var$_typeof(value)) {
                    case 'boolean':
                      type = '1i';
                      break;

                    case 'array':
                      type = value.length + 'f';
                      break;

                    case 'object':
                      type = 't';
                      break;

                    default:
                      type = '1f';
                      break;
                  }

                }

                var controller;

                if (isColor) {
                  controller = folder.addColor(datData, key);
                } else {
                  var guiRange = [];

                  if (range) {
                    guiRange = range;
                  } else if (key === 'frame') {
                    guiRange = [0, 1];
                  } else if (typeof value === 'number') {
                    if (value < 1 && value >= 0) {
                      guiRange = [0, 1];
                    } else {
                      var diff = Math.pow(10, String(Math.floor(value)).length - 1) * 2;
                      guiRange = [value - diff, value + diff];
                    }
                  }

                  controller = folder.add.apply(folder, [datData, key].concat($IDtB$var$_toConsumableArray(guiRange)));
                }

                onChange && controller.onChange(function (value) {
                  onChange(value);
                });
                listen && controller.listen();
                callback(key, {
                  type: type,
                  value: value
                });

              });
              return datData;
            }
          },
          {
            key: "addUniformData",
            value: function addUniformData(data) {
              var uniforms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
              var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
              return this.addData(data, {
                callback: function callback(key, obj) {
                  uniforms[key] = obj;
                },
                folder: options.folder,
                isUniform: true
              });

            }
          },
          {
            key: "addFolder",
            value: function addFolder(name, isClosed) {
              var folder = this.gui.addFolder(name);
              !isClosed && folder.open();
              return folder;
            }
          }]);

          return Controller;
        }();

      // ASSET: scripts/modules/easing.js
      var $JJyr$exports = {};
      /*!
       * Terms of Use: Easing Functions (Equations)
       *
       * Open source under the MIT License and the 3-Clause BSD License.
       * Copyright © 2001 Robert Penner
       * http://robertpenner.com/easing_terms_of_use.html
       */

      /**
       * linear
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */

      function $JJyr$export$linear(t, b, c, d) {
        return c * t / d + b;
      }
      /**
       * easeInQuad
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.linear = $JJyr$export$linear;

      function $JJyr$export$easeInQuad(t, b, c, d) {
        return c * (t /= d) * t + b;
      }
      /**
       * easeOutQuad
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInQuad = $JJyr$export$easeInQuad;

      function $JJyr$export$easeOutQuad(t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b;
      }
      /**
       * easeInOutQuad
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutQuad = $JJyr$export$easeOutQuad;

      function $JJyr$export$easeInOutQuad(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t + b;
        return -c / 2 * (--t * (t - 2) - 1) + b;
      }
      /**
       * easeInCubic
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutQuad = $JJyr$export$easeInOutQuad;

      function $JJyr$export$easeInCubic(t, b, c, d) {
        return c * Math.pow(t / d, 3) + b;
      }
      /**
       * easeOutCubic
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInCubic = $JJyr$export$easeInCubic;

      function $JJyr$export$easeOutCubic(t, b, c, d) {
        return c * (Math.pow(t / d - 1, 3) + 1) + b;
      }
      /**
       * easeInOutCubic
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutCubic = $JJyr$export$easeOutCubic;

      function $JJyr$export$easeInOutCubic(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 3) + b;
        return c / 2 * (Math.pow(t - 2, 3) + 2) + b;
      }
      /**
       * easeInQuart
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutCubic = $JJyr$export$easeInOutCubic;

      function $JJyr$export$easeInQuart(t, b, c, d) {
        return c * Math.pow(t / d, 4) + b;
      }
      /**
       * easeOutQuart
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInQuart = $JJyr$export$easeInQuart;

      function $JJyr$export$easeOutQuart(t, b, c, d) {
        return -c * (Math.pow(t / d - 1, 4) - 1) + b;
      }
      /**
       * easeInOutQuart
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutQuart = $JJyr$export$easeOutQuart;

      function $JJyr$export$easeInOutQuart(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 4) + b;
        return -c / 2 * (Math.pow(t - 2, 4) - 2) + b;
      }
      /**
       * easeInQuint
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutQuart = $JJyr$export$easeInOutQuart;

      function $JJyr$export$easeInQuint(t, b, c, d) {
        return c * Math.pow(t / d, 5) + b;
      }
      /**
       * easeOutQuint
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInQuint = $JJyr$export$easeInQuint;

      function $JJyr$export$easeOutQuint(t, b, c, d) {
        return c * (Math.pow(t / d - 1, 5) + 1) + b;
      }
      /**
       * easeInOutQuint
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutQuint = $JJyr$export$easeOutQuint;

      function $JJyr$export$easeInOutQuint(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(t, 5) + b;
        return c / 2 * (Math.pow(t - 2, 5) + 2) + b;
      }
      /**
       * easeInSine
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutQuint = $JJyr$export$easeInOutQuint;

      function $JJyr$export$easeInSine(t, b, c, d) {
        return c * (1 - Math.cos(t / d * (Math.PI / 2))) + b;
      }
      /**
       * easeOutSine
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInSine = $JJyr$export$easeInSine;

      function $JJyr$export$easeOutSine(t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b;
      }
      /**
       * easeInOutSine
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutSine = $JJyr$export$easeOutSine;

      function $JJyr$export$easeInOutSine(t, b, c, d) {
        return c / 2 * (1 - Math.cos(Math.PI * t / d)) + b;
      }
      /**
       * easeInExpo
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutSine = $JJyr$export$easeInOutSine;

      function $JJyr$export$easeInExpo(t, b, c, d) {
        return c * Math.pow(2, 10 * (t / d - 1)) + b;
      }
      /**
       * easeOutExpo
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInExpo = $JJyr$export$easeInExpo;

      function $JJyr$export$easeOutExpo(t, b, c, d) {
        return c * (-Math.pow(2, -10 * t / d) + 1) + b;
      }
      /**
       * easeInOutExpo
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutExpo = $JJyr$export$easeOutExpo;

      function $JJyr$export$easeInOutExpo(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
      }
      /**
       * easeInCirc
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInOutExpo = $JJyr$export$easeInOutExpo;

      function $JJyr$export$easeInCirc(t, b, c, d) {
        return c * (1 - Math.sqrt(1 - (t /= d) * t)) + b;
      }
      /**
       * easeOutCirc
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeInCirc = $JJyr$export$easeInCirc;

      function $JJyr$export$easeOutCirc(t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
      }
      /**
       * easeInOutCirc
       *
       * @param {number} t time: 現在時刻 (0 ~ duration)
       * @param {number} b begin: 開始位置
       * @param {number} c change: 開始位置から終了位置までの変化量 (finish - begin)
       * @param {number} d duration: 全体時間
       * @returns {number} 現在位置
       */


      $JJyr$exports.easeOutCirc = $JJyr$export$easeOutCirc;

      function $JJyr$export$easeInOutCirc(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * (1 - Math.sqrt(1 - t * t)) + b;
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
      }

      $JJyr$exports.easeInOutCirc = $JJyr$export$easeInOutCirc;
      var $JJyr$export$easingList = ['linear', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc'];
      $JJyr$exports.easingList = $JJyr$export$easingList;

      function $Zk$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $Zk$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $Zk$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $Zk$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $Zk$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      }
      /**
       * アニメーション関数
       *
       * @param {AnimationCallback} fn アニメーションフレーム毎に実行するコールバック
       * @param {Object} [options={}] オプション
       * @param {number} [options.begin=0] 開始位置
       * @param {number} [options.finish=1] 終了位置
       * @param {number} [options.duration=500] 全体時間
       * @param {string} [options.easing='easeInOutCubic'] Easing function
       */


      function $Zk$export$animate(fn) {
        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var _options$begin = options.begin,
          begin = _options$begin === void 0 ? 0 : _options$begin,
          _options$finish = options.finish,
          finish = _options$finish === void 0 ? 1 : _options$finish,
          _options$duration = options.duration,
          duration = _options$duration === void 0 ? 500 : _options$duration,
          _options$easing = options.easing,
          easing = _options$easing === void 0 ? 'easeInOutCubic' : _options$easing,
          _options$isRoop = options.isRoop,
          isRoop = _options$isRoop === void 0 ? false : _options$isRoop,
          onAfter = options.onAfter;
        var change = finish - begin;
        var easingFunction = $JJyr$exports[easing];
        var startTime;

        function tick(timestamp) {
          var time = Math.min(duration, timestamp - startTime);
          var position = easingFunction(time, begin, change, duration);
          fn(position, time);

          if (time === duration) {
            if (isRoop) {
              startTime = timestamp;
              requestAnimationFrame(tick);
            } else {
              onAfter && onAfter();
            }
          } else {
            requestAnimationFrame(tick);
          }
        }

        requestAnimationFrame(function (timestamp) {
          startTime = timestamp;
          tick(timestamp);
        });
      }

      var $Zk$export$Animation =
        /*#__PURE__*/
        function () {
          function Animation(fn, options) {
            $Zk$var$_classCallCheck(this, Animation);
            var _options$begin2 = options.begin,
              begin = _options$begin2 === void 0 ? 0 : _options$begin2,
              _options$finish2 = options.finish,
              finish = _options$finish2 === void 0 ? 1 : _options$finish2,
              _options$duration2 = options.duration,
              duration = _options$duration2 === void 0 ? 500 : _options$duration2,
              _options$easing2 = options.easing,
              easing = _options$easing2 === void 0 ? 'easeInOutCubic' : _options$easing2,
              _options$isRoop2 = options.isRoop,
              isRoop = _options$isRoop2 === void 0 ? false : _options$isRoop2,
              _options$isAuto = options.isAuto,
              isAuto = _options$isAuto === void 0 ? true : _options$isAuto,
              onBefore = options.onBefore,
              onAfter = options.onAfter,
              onStop = options.onStop;
            this.fn = fn;
            this.duration = duration;
            this.easingFunction = $JJyr$exports[easing];
            this.originalFrom = begin;
            this.originalTo = finish;
            this.isRoop = isRoop;
            this.onBefore = onBefore;
            this.onAfter = onAfter;
            this.onStop = onStop;
            isAuto && this.start();
          }

          $Zk$var$_createClass(Animation, [{
            key: "tick",
            value: function tick(timestamp) {
              var time = Math.min(this.duration, timestamp - this.startTime);
              var position = this.easingFunction(time, this.begin, this.change, this.duration);
              this.fn(position, time);

              if (time === this.duration) {
                if (this.isRoop) {
                  this.animate();
                } else {
                  this.onAfter && this.onAfter();
                }
              } else {
                this.id = requestAnimationFrame(this.tick.bind(this));
              }
            }
          },
          {
            key: "animate",
            value: function animate() {
              var _this = this;

              this.id = requestAnimationFrame(function (timestamp) {
                _this.startTime = timestamp;

                _this.tick(timestamp);
              });
            }
          },
          {
            key: "start",
            value: function start() {
              this.onBefore && this.onBefore();
              this.begin = this.originalFrom;
              this.finish = this.originalTo;
              this.change = this.finish - this.begin;
              this.id && this.stop();
              this.animate();
            }
          },
          {
            key: "reverse",
            value: function reverse() {
              this.onBefore && this.onBefore();
              this.begin = this.originalTo;
              this.finish = this.originalFrom;
              this.change = this.finish - this.begin;
              this.id && this.stop();
              this.animate();
            }
          },
          {
            key: "play",
            value: function play() {
              this.animate();
            }
          },
          {
            key: "stop",
            value: function stop() {
              cancelAnimationFrame(this.id);
              this.id = null;
              this.onStop && this.onStop();
            }
          },
          {
            key: "easing",
            set: function set(easing) {
              this.easingFunction = $JJyr$exports[easing];
            }
          }]);

          return Animation;
        }();
      /**
       * @typedef {function} AnimationCallback
       * @param {number} position 現在位置
       * @param {number} time 現在時刻 (0 ~ duration)
       */


      var $mrfc$export$default = {};
      // ASSET: shaders/shooting-star.vert
      var $puli$exports = {};
      $puli$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\nattribute vec3 position;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nattribute vec4 mouse;\nattribute vec2 aFront;\nattribute float random;\n\n// uniform float uProgress;\nuniform vec2 resolution;\nuniform float pixelRatio;\nuniform float timestamp;\n\nuniform float size;\nuniform float minSize;\n// uniform float delay;\nuniform float speed;\nuniform float far;\nuniform float spread;\nuniform float maxSpread;\nuniform float maxZ;\nuniform float maxDiff;\nuniform float diffPow;\n\nvarying float vProgress;\nvarying float vRandom;\nvarying float vDiff;\nvarying float vSpreadLength;\nvarying float vPositionZ;\n\nfloat cubicOut(float t) {\n  float f = t - 1.0;\n  return f * f * f + 1.0;\n}\n\n// #pragma glslify: cubicBezier = require(../../modules/cubicBezier.glsl)\n\nconst float PI = 3.1415926;\nconst float PI2 = PI * 2.;\n\nvec2 cartesianToPolar (vec2 p) {\n  return vec2((atan(p.y, p.x) + PI) / PI2, length(p));\n}\n\nvec2 polarToCartesian (vec2 p) {\n  float r = p.x * PI2 - PI;\n  float l = p.y;\n  return vec2(cos(r) * l, sin(r) * l);\n}\n\nvoid main () {\n  // float progress = max(uProgress - random * delay, 0.);\n  float progress = clamp((timestamp - mouse.z) * speed, 0., 1.);\n  progress *= step(0., mouse.x);\n\n  float startX = mouse.x - resolution.x / 2.;\n  float startY = mouse.y - resolution.y / 2.;\n  vec3 startPosition = vec3(startX, startY, random);\n\n  float diff = clamp(mouse.w / maxDiff, 0., 1.);\n  diff = pow(diff, diffPow);\n\n  vec3 cPosition = position * 2. - 1.;\n\n  float radian = cPosition.x * PI2 - PI;\n  vec2 xySpread = vec2(cos(radian), sin(radian)) * spread * mix(1., maxSpread, diff) * cPosition.y;\n\n  vec3 endPosition = startPosition;\n  endPosition.xy += xySpread;\n  endPosition.xy -= aFront * far * random;\n  endPosition.z += cPosition.z * maxZ * (pixelRatio > 1. ? 1.2 : 1.);\n\n  float positionProgress = cubicOut(progress * random);\n  // float positionProgress = cubicBezier(.29, .16, .3, 1., progress);\n  vec3 currentPosition = mix(startPosition, endPosition, positionProgress);\n\n  vProgress = progress;\n  vRandom = random;\n  vDiff = diff;\n  vSpreadLength = cPosition.y;\n  vPositionZ = position.z;\n\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(currentPosition, 1.);\n  gl_PointSize = max(currentPosition.z * size * diff * pixelRatio, minSize * (pixelRatio > 1. ? 1.3 : 1.));\n}\n";
      // ASSET: shaders/shooting-star.frag
      var $v3o$exports = {};
      $v3o$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\n\n// uniform float uProgress;\nuniform float fadeSpeed;\nuniform float shortRangeFadeSpeed;\nuniform float minFlashingSpeed;\nuniform float blur;\n\nvarying float vProgress;\nvarying float vRandom;\nvarying float vDiff;\nvarying float vSpreadLength;\nvarying float vPositionZ;\n\nhighp float random(vec2 co)\n{\n    highp float a = 12.9898;\n    highp float b = 78.233;\n    highp float c = 43758.5453;\n    highp float dt= dot(co.xy ,vec2(a,b));\n    highp float sn= mod(dt,3.14);\n    return fract(sin(sn) * c);\n}\n\nfloat quadraticIn(float t) {\n  return t * t;\n}\n\n#ifndef HALF_PI\n#define HALF_PI 1.5707963267948966\n#endif\n\nfloat sineOut(float t) {\n  return sin(t * HALF_PI);\n}\n\nconst vec3 baseColor = vec3(170., 133., 88.) / 255.;\n\nvoid main(){\n\tvec2 p = gl_PointCoord * 2. - 1.;\n\tfloat len = length(p);\n\n  float cRandom = random(vec2(vProgress * mix(minFlashingSpeed, 1., vRandom)));\n  cRandom = mix(0.3, 2., cRandom);\n\n  float cBlur = blur * mix(1., 0.3, vPositionZ);\n\tfloat shape = smoothstep(1. - cBlur, 1. + cBlur, (1. - cBlur) / len);\n  shape *= mix(0.5, 1., vRandom);\n\n  if (shape == 0.) discard;\n\n  float darkness = mix(0.1, 1., vPositionZ);\n\n  float alphaProgress = vProgress * fadeSpeed * mix(2.5, 1., pow(vDiff, 0.6));\n  alphaProgress *= mix(shortRangeFadeSpeed, 1., sineOut(vSpreadLength) * quadraticIn(vDiff));\n  float alpha = 1. - min(alphaProgress, 1.);\n  alpha *= cRandom * vDiff;\n\n\tgl_FragColor = vec4(baseColor * darkness * cRandom, shape * alpha);\n}\n";

      function $a87C$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $a87C$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $a87C$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $a87C$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $a87C$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      }

      var $a87C$var$PER_MOUSE = 800;
      var $a87C$var$COUNT = $a87C$var$PER_MOUSE * 400;
      var $a87C$var$MOUSE_ATTRIBUTE_COUNT = 4;
      var $a87C$var$FRONT_ATTRIBUTE_COUNT = 2;
      var $a87C$var$data = {
        visible: {
          value: true
        }
      };


      var $a87C$var$uniformData = {
        size: {
          value: 0.05,
          range: [0, 1]
        },

        minSize: {
          value: 1,
          range: [0, 5]
        },

        speed: {
          value: 0.012,
          range: [0, 0.05]
        },

        fadeSpeed: {
          value: 1.1,
          range: [1, 2]
        },

        shortRangeFadeSpeed: {
          value: 1.3,
          range: [1, 5]
        },

        minFlashingSpeed: {
          value: 0.1,
          range: [0, 1]
        },

        spread: {
          value: 7,
          range: [0, 20]
        },

        maxSpread: {
          value: 5,
          range: [1, 20]
        },

        maxZ: {
          value: 100,
          range: [0, 500]
        },

        blur: {
          value: 1,
          range: [0, 1]
        },

        far: {
          value: 10,
          range: [0, 100]
        },

        maxDiff: {
          value: 100,
          range: [0, 1000]
        },

        diffPow: {
          value: 0.24,
          range: [0, 10]
        }
      };


      var $a87C$var$dataKeys = Object.keys($a87C$var$uniformData);

      var $a87C$export$default =
        /*#__PURE__*/
        function () {
          function ShootingStar() {
            var _this = this;

            $a87C$var$_classCallCheck(this, ShootingStar);
            var root = $mrfc$export$default.root,
              controller = $mrfc$export$default.controller;
            this.root = root;
            this.rate = 1;
            this.setSize();
            var folder = controller.addFolder('Shooting Star');
            this.datData = controller.addData($a87C$var$data, {
              folder: folder
            });

            var front = new THREE.Vector2();
            var uniforms = {
              resolution: {
                value: $mrfc$export$default.resolution
              },

              pixelRatio: {
                value: root.renderer.getPixelRatio()
              },

              timestamp: {
                value: 0
              }
            };


            this.datUniformData = controller.addUniformData($a87C$var$uniformData, uniforms, {
              folder: folder
            });

            var geometry = this.geometry = new THREE.BufferGeometry();
            var positions = [];
            var mouse = [];
            var aFront = [];
            var random = [];

            for (var i = 0; i < $a87C$var$COUNT; i++) {
              positions.push(Math.random(), Math.random(), Math.random());
              mouse.push(-1, -1, 0, 0);
              aFront.push(front.x, front.y);
              random.push(Math.random());
            }

            geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
            geometry.addAttribute('mouse', new THREE.Float32BufferAttribute(mouse, $a87C$var$MOUSE_ATTRIBUTE_COUNT));
            geometry.addAttribute('aFront', new THREE.Float32BufferAttribute(aFront, $a87C$var$FRONT_ATTRIBUTE_COUNT));
            geometry.addAttribute('random', new THREE.Float32BufferAttribute(random, 1));
            var $puli$$interop$default = $parcel$interopDefault($puli$exports);
            var $v3o$$interop$default = $parcel$interopDefault($v3o$exports);
            var material = this.material = new THREE.RawShaderMaterial({
              uniforms: uniforms,
              vertexShader: $puli$$interop$default.d,
              fragmentShader: $v3o$$interop$default.d,
              transparent: true,
              depthTest: false,
              blending: THREE.AdditiveBlending
            });

            var mesh = this.mesh = new THREE.Points(geometry, material);
            mesh.frustumCulled = false;
            mesh.visible = this.datData.visible;
            root.add(mesh); // root.initPostProcessing([
            //   new THREE.BloomPass(1.3, 25, 3.1, 256),
            //   new THREE.ShaderPass(THREE.CopyShader)
            // ])

            this.mouseI = 0;
            this.lineCoordinateList = [];
            this.enableSaveCoordinate = false;
            root.addResizeCallback(function () {
              _this.setSize();

              material.uniforms['resolution'].value = $mrfc$export$default.resolution; // let scale
              // if (store.ratio > store.initialRatio) {
              //   scale = store.clientHeight / store.initialClientHeight
              // } else {
              //   scale = store.clientWidth / store.initialClientWidth
              // }
              // console.log(scale)
              // mesh.scale.set(scale, scale, 1)
            });
            root.addUpdateCallback(function (timestamp) {
              _this.update(timestamp);
            });
          }

          $a87C$var$_createClass(ShootingStar, [{
            key: "setSize",
            value: function setSize() {
              this.rate = Math.min($mrfc$export$default.ratio > $mrfc$export$default.initialRatio ? $mrfc$export$default.clientHeight / $mrfc$export$default.initialClientHeight : $mrfc$export$default.clientWidth / $mrfc$export$default.initialClientWidth, 1);
              this.rate *= 1 / ($mrfc$export$default.clientHeight / $mrfc$export$default.initialClientHeight);
            }
          },
          {
            key: "update",
            value: function update(timestamp) {
              var _this2 = this;

              this.timestamp = timestamp;
              this.material.uniforms['timestamp'].value = timestamp;
              this.mesh.visible = this.datData.visible;
              $a87C$var$dataKeys.forEach(function (key) {
                _this2.material.uniforms[key].value = _this2.datUniformData[key];
              });
            }
          },
          {
            key: "draw",
            value: function draw(_ref) {
              var clientX = _ref.clientX,
                clientY = _ref.clientY;
              this.enableSaveCoordinate && this.lineCoordinateList.push({
                clientX: clientX,
                clientY: clientY
              });
              // const x = clientX + store.clientHalfWidth
              // const y = store.clientHeight - (clientY + store.clientHalfHeight)

              var x = clientX * this.rate + $mrfc$export$default.clientHalfWidth;
              var y = $mrfc$export$default.clientHeight - (clientY * this.rate + $mrfc$export$default.clientHalfHeight);
              var newPosition = new THREE.Vector2(x, y);
              var diff = this.oldPosition ? newPosition.clone().sub(this.oldPosition) : new THREE.Vector2();
              var length = diff.length();
              var front = diff.clone().normalize();

              for (var i = 0; i < $a87C$var$PER_MOUSE; i++) {
                var ci = this.mouseI % ($a87C$var$COUNT * $a87C$var$MOUSE_ATTRIBUTE_COUNT) + i * $a87C$var$MOUSE_ATTRIBUTE_COUNT;
                var position = this.oldPosition ? this.oldPosition.clone().add(diff.clone().multiplyScalar(i / $a87C$var$PER_MOUSE)) : newPosition;
                this.geometry.attributes['mouse'].array[ci] = position.x;
                this.geometry.attributes['mouse'].array[ci + 1] = position.y;
                this.geometry.attributes['mouse'].array[ci + 2] = this.timestamp;
                this.geometry.attributes['mouse'].array[ci + 3] = length;
                this.geometry.attributes['aFront'].array[ci] = front.x;
                this.geometry.attributes['aFront'].array[ci + 1] = front.y;
              }

              this.oldPosition = newPosition;
              this.geometry.attributes['mouse'].needsUpdate = true;
              this.geometry.attributes['aFront'].needsUpdate = true;
              this.mouseI += $a87C$var$MOUSE_ATTRIBUTE_COUNT * $a87C$var$PER_MOUSE;
            }
          },
          {
            key: "start",
            value: function start() {
              var _this3 = this;

              this.oldPosition = null;
              window.addEventListener('pointermove', function (e) {
                var clientX = e.clientX,
                  clientY = e.clientY;

                _this3.draw({
                  clientX: clientX - $mrfc$export$default.clientHalfWidth,
                  clientY: clientY - $mrfc$export$default.clientHalfHeight
                });

              });
              window.addEventListener('touchmove', function (e) {
                var _e$touches$ = e.touches[0],
                  clientX = _e$touches$.clientX,
                  clientY = _e$touches$.clientY;

                _this3.draw({
                  clientX: clientX - $mrfc$export$default.clientHalfWidth,
                  clientY: clientY - $mrfc$export$default.clientHalfHeight
                });

              });
            }
          }]);

          return ShootingStar;
        }();

      function $vFOr$export$getTextCoordinate(option) {
        var text = option.text,
          fontSize = option.fontSize,
          _option$letterSpacing = option.letterSpacing,
          letterSpacing = _option$letterSpacing === void 0 ? 0 : _option$letterSpacing,
          _option$font = option.font,
          font = _option$font === void 0 ? 'Open sans' : _option$font,
          _option$color = option.color,
          color = _option$color === void 0 ? '#000000' : _option$color,
          _option$width = option.width,
          width = _option$width === void 0 ? fontSize * text.length + fontSize * letterSpacing * (text.length - 1) : _option$width,
          _option$height = option.height,
          height = _option$height === void 0 ? fontSize : _option$height,
          _option$pixelRatio = option.pixelRatio,
          pixelRatio = _option$pixelRatio === void 0 ? window.devicePixelRatio : _option$pixelRatio;
        fontSize *= pixelRatio;
        width *= pixelRatio;
        height *= pixelRatio;
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        canvas.style.fontSize = fontSize + 'px';
        canvas.style.letterSpacing = letterSpacing + 'em';
        canvas.style.display = 'none';
        document.body.appendChild(canvas); // letter-spacing を有効にするために必要

        var ctx = canvas.getContext('2d');
        ctx.font = "".concat(fontSize, "px ").concat(font);
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle'; // \n で改行して複数行にする

        var textLines = text.split('\n');
        textLines.forEach(function (text, i) {
          var x = width / 2;
          var y = height / 2 + fontSize * i - fontSize / 2 * (textLines.length - 1);
          ctx.fillText(text, x, y);
        });
        return canvas;
      }

      // ASSET: shaders/general/three-raw-plain.vert
      var $eAJ8$exports = {};
      $eAJ8$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\nattribute vec3 position;\nattribute vec2 uv;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nvarying vec2 vUv;\n\nvoid main () {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);\n}\n";
      // ASSET: shaders/text.frag
      var $UNYd$exports = {};
      $UNYd$exports = "precision highp float;\nprecision highp int;\n#define GLSLIFY 1\n\nuniform sampler2D map;\nuniform float uProgress;\nuniform float uStartX;\nuniform float uRatio;\nuniform float alpha;\n\nvarying vec2 vUv;\n\nvoid main(){\n\tvec4 textureColor = texture2D(map, vUv);\n\tfloat angle = uRatio / 3.;\n\tfloat isShow = step(1., 1. - vUv.x + (uProgress / uStartX * 0.5 + 0.5) - abs(vUv.y - 0.5) / angle);\n\tgl_FragColor = vec4(textureColor.rgb, textureColor.a * alpha * isShow);\n\t// gl_FragColor = vec4(isShow);\n}\n";

      function $m6Ky$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $m6Ky$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $m6Ky$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $m6Ky$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $m6Ky$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      }

      var $m6Ky$var$TEXT = 'Shooting Star';
      var $m6Ky$var$FONT_SIZE = 30;
      var $m6Ky$var$FONT_SIZE_SP = 24;
      var $m6Ky$var$FONT_SIZE_MIN = 20;
      var $m6Ky$var$LETTER_SPACING = 0.18;
      var $m6Ky$var$LETTER_SPACING_SP = 0.1;
      var $m6Ky$var$FONT = 'Georgia, serif';
      var $m6Ky$var$COLOR = '#fff';
      var $m6Ky$var$data = {
        visible: {
          value: true
        },

        duration: {
          value: 1080,
          range: [0, 5000]
        },

        easing: {
          value: 'easeOutQuint',
          range: [$JJyr$export$easingList]
        }
      };


      var $m6Ky$var$uniformData = {
        alpha: {
          value: 0.8,
          range: [0, 1]
        }
      };


      var $m6Ky$var$dataKeys = Object.keys($m6Ky$var$uniformData);

      var $m6Ky$export$default =
        /*#__PURE__*/
        function () {
          function Text() {
            var _this = this;

            $m6Ky$var$_classCallCheck(this, Text);
            var root = $mrfc$export$default.root,
              controller = $mrfc$export$default.controller;
            var folder = this.folder = controller.addFolder('Text');
            this.datData = controller.addData($m6Ky$var$data, {
              folder: folder
            });

            var fontSize = $mrfc$export$default.clientWidth < 360 ? $m6Ky$var$FONT_SIZE_MIN : $mrfc$export$default.clientWidth < 768 ? $m6Ky$var$FONT_SIZE_SP : $m6Ky$var$FONT_SIZE;
            var letterSpacing = $mrfc$export$default.clientWidth < 768 ? $m6Ky$var$LETTER_SPACING_SP : $m6Ky$var$LETTER_SPACING;
            var textNormalWidth = $m6Ky$var$TEXT.length + letterSpacing * ($m6Ky$var$TEXT.length - 1);
            var textWidth = fontSize * textNormalWidth;
            var textHeight = fontSize * 1.2;
            var pixelRatio = window.devicePixelRatio;
            var textCanvas = $vFOr$export$getTextCoordinate({
              text: $m6Ky$var$TEXT,
              fontSize: fontSize,
              height: textHeight,
              letterSpacing: letterSpacing,
              font: $m6Ky$var$FONT,
              color: $m6Ky$var$COLOR,
              pixelRatio: pixelRatio
            });

            var width = textCanvas.width / pixelRatio;
            var height = textCanvas.height / pixelRatio;
            var halfWidth = width / 2;
            var texture = new THREE.Texture(textCanvas);
            texture.needsUpdate = true;
            texture.minFilter = THREE.LinearFilter;
            var geometry = new THREE.PlaneBufferGeometry(width, height);
            var uniforms = {
              map: {
                value: texture
              },

              uProgress: {
                value: -$mrfc$export$default.clientHalfWidth
              },

              uStartX: {
                value: $mrfc$export$default.clientHalfWidth - halfWidth
              },

              uRatio: {
                value: width / height
              }
            };


            this.datUniformData = controller.addUniformData($m6Ky$var$uniformData, uniforms, {
              folder: folder
            });

            var $eAJ8$$interop$default = $parcel$interopDefault($eAJ8$exports);
            var $UNYd$$interop$default = $parcel$interopDefault($UNYd$exports);
            var material = this.material = new THREE.RawShaderMaterial({
              uniforms: uniforms,
              vertexShader: $eAJ8$$interop$default.d,
              fragmentShader: $UNYd$$interop$default.d,
              transparent: true
            });

            var mesh = this.mesh = new THREE.Mesh(geometry, material);
            mesh.frustumCulled = false;
            mesh.visible = this.datData.visible;
            mesh.position.setZ(0.1);
            root.add(mesh);
            root.addUpdateCallback(function (timestamp) {
              _this.mesh.visible = _this.datData.visible;
              $m6Ky$var$dataKeys.forEach(function (key) {
                _this.material.uniforms[key].value = _this.datUniformData[key];
              });
            });
          }

          $m6Ky$var$_createClass(Text, [{
            key: "update",
            value: function update(progress) {
              this.material.uniforms['uProgress'].value = progress;
            }
          }]);

          return Text;
        }();

      function $Focm$var$_classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }

      function $Focm$var$_defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
          var descriptor = props[i];
          descriptor.enumerable = descriptor.enumerable || false;
          descriptor.configurable = true;
          if ("value" in descriptor) descriptor.writable = true;
          Object.defineProperty(target, descriptor.key, descriptor);
        }
      }

      function $Focm$var$_createClass(Constructor, protoProps, staticProps) {
        if (protoProps) $Focm$var$_defineProperties(Constructor.prototype, protoProps);
        if (staticProps) $Focm$var$_defineProperties(Constructor, staticProps);
        return Constructor;
      }

      var $Focm$var$CAMERA_Z = 5000;
      var $Focm$var$MAX_CAMERA_Z = 5000;
      var $Focm$var$FIRST_DURATION = 1080;
      var $Focm$var$DELAY = 300;
      var $Focm$var$data = {
        play: {
          value: null
        }
      };



      var $Focm$var$WebGL =
        /*#__PURE__*/
        function () {
          function WebGL(_ref) {
            var _this = this;

            var canvas = _ref.canvas,
              _ref$container = _ref.container,
              container = _ref$container === void 0 ? document.body : _ref$container;
            $Focm$var$_classCallCheck(this, WebGL);
            var controller = new $IDtB$export$default({
              closed: true
            });

            $mrfc$export$default.controller = controller;
            var initialClientWidth = $mrfc$export$default.initialClientWidth = container.clientWidth;
            var initialClientHeight = $mrfc$export$default.initialClientHeight = container.clientHeight; // store.initialRatio = container.clientWidth / container.clientHeight

            $mrfc$export$default.initialRatio = 1;
            var root = this.root = $mrfc$export$default.root = new $pTw7$export$default({
              isDev: true,
              container: container,
              fov: Math.atan(initialClientHeight / 2 / $Focm$var$CAMERA_Z) * (180 / Math.PI) * 2,
              zFar: $Focm$var$MAX_CAMERA_Z,
              cameraPosition: [0, 0, $Focm$var$CAMERA_Z],
              aspect: window.innerWidth / window.innerHeight,
              canvas: canvas
            });

            this.setSize();
            root.addResizeCallback(function () {
              _this.setSize();
            }); // this.background = new Background()

            this.text = new $m6Ky$export$default();
            this.shootingStar = new $a87C$export$default();

            $Focm$var$data['play'].value = function () {
              _this.textStart();
            };

            controller.addData($Focm$var$data, {
              folder: this.text.folder
            });
            // root.initPostProcessing([
            //   new THREE.BloomPass(),
            //   new THREE.ShaderPass(THREE.CopyShader)
            // ])
          }

          $Focm$var$_createClass(WebGL, [{
            key: "setSize",
            value: function setSize() {
              var clientWidth = $mrfc$export$default.clientWidth = this.root.canvas.clientWidth;
              var clientHeight = $mrfc$export$default.clientHeight = this.root.canvas.clientHeight;
              $mrfc$export$default.clientHalfWidth = clientWidth / 2;
              $mrfc$export$default.clientHalfHeight = clientHeight / 2;
              $mrfc$export$default.resolution = new THREE.Vector2(clientWidth, clientHeight);
              $mrfc$export$default.ratio = clientWidth / clientHeight;
            }
          },
          {
            key: "start",
            value: function start() {
              var _this2 = this;

              var period = Math.PI * 3;
              var amplitude = Math.min(Math.max($mrfc$export$default.clientWidth * 0.1, 100), 180);
              $Zk$export$animate(function (progress) {
                _this2.shootingStar.draw({
                  clientX: Math.cos(progress * period) * amplitude,
                  clientY: (progress * $mrfc$export$default.clientHeight - $mrfc$export$default.clientHalfHeight) * 1.3
                });

              }, {
                duration: $Focm$var$FIRST_DURATION,
                onAfter: function onAfter() {
                  _this2.shootingStar.draw({
                    clientX: -$mrfc$export$default.clientHalfWidth,
                    clientY: $mrfc$export$default.clientHeight - $mrfc$export$default.clientHalfHeight
                  });


                  _this2.shootingStar.draw({
                    clientX: -$mrfc$export$default.clientHalfWidth * 1.1,
                    clientY: 0
                  });


                  setTimeout(function () {
                    _this2.textStart();
                  }, 300);
                }
              });

            }
          },
          {
            key: "textStart",
            value: function textStart() {
              var _this3 = this;

              $Zk$export$animate(function (progress) {
                _this3.shootingStar.draw({
                  clientX: progress,
                  clientY: 0
                });


                _this3.text.update(progress - $mrfc$export$default.clientWidth * 0.08);
              }, {
                begin: -$mrfc$export$default.clientHalfWidth * 1.1,
                finish: $mrfc$export$default.clientHalfWidth * 1.1,
                duration: this.text.datData.duration,
                easing: this.text.datData.easing,
                onAfter: function onAfter() {
                  _this3.shootingStar.start();

                  document.body.classList.add('o-start');
                }
              });

            }
          }]);

          return WebGL;
        }();

      var $Focm$var$webGL = new $Focm$var$WebGL({
        canvas: document.getElementById('canvas')
      });

      setTimeout(function () {
        $Focm$var$webGL.start();
      }, $Focm$var$DELAY);
      return {
        "Focm": {}
      };

    });
//# sourceURL=pen.js
  </script>







  <div class="dg ac">
    <div class="dg main a" style="width: 245px;">
      <div style="width: 6px; margin-left: -3px; height: 0px; cursor: ew-resize; position: absolute;"></div>
      <ul class="closed" style="height: auto;">
        <li class="folder">
          <div class="dg">
            <ul>
              <li class="title">Text</li>
              <li class="cr boolean">
                <div><span class="property-name">visible</span>
                  <div class="c"><input type="checkbox" checked="checked"></div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">duration</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 21.6%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr string">
                <div><span class="property-name">easing</span>
                  <div class="c"><select>
                      <option value="linear">linear</option>
                      <option value="easeInSine">easeInSine</option>
                      <option value="easeOutSine">easeOutSine</option>
                      <option value="easeInOutSine">easeInOutSine</option>
                      <option value="easeInQuad">easeInQuad</option>
                      <option value="easeOutQuad">easeOutQuad</option>
                      <option value="easeInOutQuad">easeInOutQuad</option>
                      <option value="easeInCubic">easeInCubic</option>
                      <option value="easeOutCubic">easeOutCubic</option>
                      <option value="easeInOutCubic">easeInOutCubic</option>
                      <option value="easeInQuart">easeInQuart</option>
                      <option value="easeOutQuart">easeOutQuart</option>
                      <option value="easeInOutQuart">easeInOutQuart</option>
                      <option value="easeInQuint">easeInQuint</option>
                      <option value="easeOutQuint">easeOutQuint</option>
                      <option value="easeInOutQuint">easeInOutQuint</option>
                      <option value="easeInExpo">easeInExpo</option>
                      <option value="easeOutExpo">easeOutExpo</option>
                      <option value="easeInOutExpo">easeInOutExpo</option>
                      <option value="easeInCirc">easeInCirc</option>
                      <option value="easeOutCirc">easeOutCirc</option>
                      <option value="easeInOutCirc">easeInOutCirc</option>
                    </select></div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">alpha</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 80%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr function">
                <div><span class="property-name">play</span>
                  <div class="c">
                    <div class="button"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li class="folder">
          <div class="dg">
            <ul>
              <li class="title">Shooting Star</li>
              <li class="cr boolean">
                <div><span class="property-name">visible</span>
                  <div class="c"><input type="checkbox" checked="checked"></div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">size</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 5%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">minSize</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 20%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">speed</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 24%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">fadeSpeed</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 10%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">shortRangeFadeSpeed</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 7.5%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">minFlashingSpeed</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 10%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">spread</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 35%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">maxSpread</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 21.0526%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">maxZ</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 20%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">blur</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 100%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">far</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 10%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">maxDiff</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 10%;"></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="cr number has-slider">
                <div><span class="property-name">diffPow</span>
                  <div class="c">
                    <div><input type="text"></div>
                    <div class="slider">
                      <div class="slider-fg" style="width: 2.4%;"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="close-button close-bottom" style="width: 245px;">Open Controls</div>
    </div>
  </div><canvas width="454" height="36" style="font-size: 30px; letter-spacing: 0.18em; display: none;"></canvas>
</body>

</html>